<template>
  <el-skeleton
    :rows="showComponentType.length"
    :loading="loading"
    animated
  ></el-skeleton>
  <VenueApplication
    v-if="!loading"
    :formData="showComponentType"
    @siteSubmitEvent="siteSubmitEvent"
    @cancelEvent="goback"
  ></VenueApplication>
</template>
<script setup>
import VenueApplication from "./VenueApplication.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

//传递给子组件渲染相关input,select,upload,textarea,radio,checkbox等
const showComponentType = ref([
  {
    type: "input",
    label: "场地名称：",
    prop: "site",
    value: "",
    placeholder: "请输入场地名称",
    isEdit: "true",
    disabled: false,
  },
  {
    type: "select",
    label: "申报类型：",
    prop: "siteType",
    value: "",
    placeholder: "请选申报类型",
    isEdit: "true",
    disabled: false,
    options: [
      {
        label: "申报类型1",
        value: "申报类型1",
      },
      {
        label: "申报类型2",
        value: "申报类型2",
      },
      {
        label: "申报类型3",
        value: "申报类型3",
      },
    ],
  },
  {
    type: "input",
    label: "场地所属：",
    prop: "siteBelong",
    value: "",
    placeholder: "请输入场地所属",
    isEdit: "true",
    disabled: false,
  },
  {
    type: "textarea",
    label: "场地说明：",
    prop: "siteDescription",
    value: "",
    placeholder: "请输入场地说明",
    isEdit: "true",
    disabled: false,
  },
  {
    type: "input",
    label: "场地地址：",
    prop: "siteAddress",
    value: "",
    placeholder: "请输入场地地址",
    isEdit: "true",
    disabled: false,
  },
  {
    type: "inputNumber",
    label: "容纳人数：",
    prop: "people",
    value: "",
    placeholder: "请输入容纳人数",
    isEdit: "true",
    disabled: false,
  },
  {
    type: "input",
    label: "管理员姓名：",
    prop: "adminName",
    value: "",
    placeholder: "请输入管理员姓名",
    isEdit: "true",
    disabled: true,
  },
  {
    type: "input",
    label: "联系电话：",
    prop: "phone",
    value: "",
    placeholder: "请输入练习电话",
    isEdit: "true",
    disabled: true,
  },
  {
    type: "input",
    label: "邮箱：",
    prop: "email",
    value: "",
    placeholder: "请输入邮箱",
    isEdit: "true",
    disabled: true,
  },
  {
    type: "upload",
    label: "请上传场地图片：",
    prop: "siteImg",
    value: "",
    placeholder: "请上传场地图片",
    isEdit: "true",
    disabled: true,
    fileList: [
      {
        name: "food.jpeg",
        url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      },
      {
        name: "plant-1.png",
        url: "/images/plant-1.png",
      },
      {
        name: "food.jpeg",
        url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      },
      {
        name: "food.jpeg",
        url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
      },
    ],
  },
  {
    type: "textarea",
    label: "请输入您的意见：",
    prop: "opinion",
    value: "",
    placeholder: "请输入您的意见",
    isEdit: "true",
    disabled: true,
  },
  {
    type: "button",
    isEdit: "true",
    disabled: true,
    cancelBtn: {
      size: "default",
      text: "取消",
      type: "",
    },
    submitBtn: {
      size: "default",
      text: "提交申请",
      type: "primary",
    },
  },
]);

onMounted(() => {
  //获取场地信息
  getDataList();
});
const loading = ref(true);
//接口获取的数据给到子组件showComponentType中,进行渲染
const getDataList = () => {
  //接口获取数据
  let data = {
    site: "场地名称：", //场地名称
    siteType: "场地类型：", //场地类型
    siteBelong: "场地归属：", //场地归属
    siteDescription: "场地描述深刻的那就是空间", //场地描述
    siteAddress: "场地地址：", //场地地址
    people: "120", //容纳人数
    adminName: "张小白", //场地管理员
    phone: "1517228242", //场地管理员电话
    email: "1517228242@qq.com", //
    siteImg: "", //场地图片
    opinion: "没有意见", //意见
  };
  //将接口获取的数据给到子组件showComponentType中,进行渲染
  showComponentType.value[0].value = data.site;
  showComponentType.value[1].value = data.siteType;
  showComponentType.value[2].value = data.siteBelong;
  showComponentType.value[3].value = data.siteDescription;
  showComponentType.value[4].value = data.siteAddress;
  showComponentType.value[5].value = data.people;
  showComponentType.value[6].value = data.adminName;
  showComponentType.value[7].value = data.phone;
  showComponentType.value[8].value = data.email;
  showComponentType.value[9].value = data.siteImg;
  showComponentType.value[10].value = data.opinion;
  loading.value = false;
};
const siteSubmitEvent = (data) => {
  console.log(data, "回传数据");
};
const goback = (data) => {
  router.go(-1);
};
</script>
